<template>
 <div class="navList">
     <li v-for="(item, index) in navList" :key="item" @click="currentView(index)" :class="[{'z-selected':index==count},'navList-item']">
       <span>{{item}}</span>
     </li>
   
 </div>
</template>

<script>
 export default {
   data () {
     return {
         navList:["推荐","朋友","电台"],
         recoment:null,
        
     }
   },
   components: {

   },
   methods:{
       currentView(index){
        this.$emit('navIndex',index)
       this.$store.commit("NAVINDEXX",index)
       }
   },
   mounted() {
       console.log(this.$store.state.navIndex)
   },
   computed: {
       count(){
           return this.$store.state.navIndex
       }
   },
 }
</script>

<style lang="stylus" scoped>
.navList
    display :flex
    justify-content :space-around
    color :#f2f2f2
    padding-top:113px
    & .navList-item
        cursor: pointer
        position: relative
        padding: 5Px 6Px;
    & .z-selected:after 
            content: ""
            position: absolute
            left: 0
            bottom: -1px
            z-index: 3
            width: 100%
            height: 4px
            transform: scaleY(.5)
            background: #fff
</style>

